{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>FinalProject|{{title}}</title>
        <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
        <link href="{% static 'css/style.css' %}"  rel="stylesheet">
        <script src="{% static 'js/bootstrap.min.js' %}"></script>
        <script src="{% static 'js/jquery.min.js' %}"></script>
    </head>
    <body>
        <nav>
            <div>
                <ul>
                    <br>
                    <li>
                        <img src="{{headShot}}" title="???" height="100px" width="100px">
                    </li>
                    <br>
                    <li>
                        <a class="nav" href="{% url 'hall:create' %}">创建房间</a>
                    </li>
                    <li>
                        <a class="nav" href="{% url 'hall:list' %}">房间列表</a>
                    </li>
                    <li>
                        <a class="nav" href="{% url 'visualization:visualization' %}" target="_blank">可视化分析</a>
                    </li>
                    <br>
                    <li class="aboutme">
                        <a class="nav" href="{% url 'hall:aboutme' %}" style="height: 100%;text-align: center;">about me</a>
                    </li>
                </ul>
            </div>
        </nav>
        <br>
        {% block content %}
        {% endblock %}

        {% block scriptCode %}
        {% endblock %}
    </body>
    <style>
        nav div ul li{
            text-align: center;
        }
        nav{
            margin-left: 1%;
            /* padding-left: 1%; */
            text-align: center;
        }

        nav div ul li a.nav {
            text-align: center;
            display: block;
            color: #000;
            padding: 8px 8px 8px 8px;
            text-decoration: none;
        
        }
         
        /* 鼠标移动到选项上修改背景颜色 */
        nav div ul li a:hover {
            background-color: rgb(117, 110, 219);
            color: rgb(3, 8, 20);
        }
        
        .activeA{
            background-color: rgb(117, 110, 219);
        }
        
        nav div ul{
            background-color: #8adfee;
            /* margin-left: 0;
            padding-top: 0; */
            margin: 0;
            padding: 0;
            height: 100%;
            width: 10%;
            position: fixed;
            list-style-type: none;
            text-align: center;
        }
        
        .details{
            margin-left: 20%;
            margin-right: 20%;
            background-color: #6aa7da;
            height: 100%;
        }
    </style>
</html>